<template>
  <div>
    <Card>
      <div
        style="
          display: flex;
          align-items: center;
          justify-content: space-between;
        "
      >
        <div style="display: flex">
          <Input
            placeholder="请输入用户名称"
            style="width: 200px; margin-right: 10px"
            @on-change="changeOrder"
            suffix="ios-search"
            v-model="accountName"
            clearable
          ></Input>
          <Input
            placeholder="请输入操作类型"
            style="width: 200px; margin-right: 10px"
            @on-change="changeOrder"
            suffix="ios-search"
            v-model="operationType"
            clearable
          ></Input>
          <DatePicker
            transfer
            :disabled="false"
            type="datetimerange"
            placeholder="选择起止时间"
            format="yyyy-MM-dd HH:mm:ss"
            style="width: 400px"
            v-model="time"
            :editable="false"
            @on-change="changeOrder"
          ></DatePicker>
        </div>
      </div>
      <Table
        class="table"
        :loading="loading"
        highlight-row
        :columns="columns"
        :data="data"
      ></Table>
      <Page
        show-total
        class="page"
        :total="total"
        :current.sync="current"
        show-elevator
        @on-change="changePage"
      />
    </Card>
    <Modal
      title="日志详情"
      v-model="logModal"
      width="65"
      :closable="false"
      :mask-closable="true"
    >
      <div class="logView">
        <div class="logItem">
          <div class="title">浏览器:</div>
          <div class="conten">{{ logDetail.browserType }}</div>
        </div>
        <div class="logItem">
          <div class="title">操作系统:</div>
          <div class="conten">{{ logDetail.clientType }}</div>
        </div>
        <div class="logItem mt30">
          <div class="title">接口名称:</div>
          <div class="conten">{{ logDetail.url }}</div>
        </div>
        <div class="logItem mt30">
          <div class="title">请求参数:</div>
          <div class="conten">{{ logDetail.requestBody }}</div>
        </div>
        <div class="logItem mt30">
          <div class="title">返回结果:</div>
          <div class="conten">{{ logDetail.responseBody }}</div>
        </div>
      </div>
    </Modal>
    <!-- <Modal fullscreen title="响应结果" v-model="modal">
      <json-viewer :value="msg" :expand-depth="2" copyable sort></json-viewer>
      <div slot="footer">
        <Button type="warning" class="Button" @click="modal = false"
          >关闭</Button
        >
      </div>
    </Modal> -->
    <!-- <Modal fullscreen title="请求内容" v-model="modal2">
      <json-viewer :value="msg2" :expand-depth="2" copyable sort></json-viewer>
      <div slot="footer">
        <Button type="warning" class="Button" @click="modal2 = false"
          >关闭</Button
        >
      </div>
    </Modal> -->
  </div>
</template>

<script>
import axios from "axios";
import JsonViewer from "vue-json-viewer";
export default {
  data() {
    return {
      loading: false,
      columns: [
        {
          title: "操作者用户名",
          key: "accountName",
          align: "center",
          minWidth: 150,
        },
        {
          title: "操作业务名称",
          key: "operationType",
          align: "center",
          minWidth: 130,
        },
        { title: "浏览器", key: "browserType", align: "center", minWidth: 120 },
        {
          title: "操作系统",
          key: "clientType",
          align: "center",
          minWidth: 120,
        },
        { title: "操作时间", key: "gmtCreate", align: "center", minWidth: 200 },
        { title: "IP地址", key: "ip", align: "center", minWidth: 160 },
        // { title: "处理时长（ms）", key: "processingMilliseconds", align: "center",minWidth: 200, },
        {
          title: "组织名称",
          key: "organizationName",
          align: "center",
          minWidth: 170,
        },

        // { title: "操作者手机号", key: "userPhone", align: "center",minWidth: 200, },
        {
          title: "操作",
          align: "center",
          minWidth: 200,
          fixed: "right",
          render: (h, params) => {
            return h("div", [
              h(
                "Button",
                {
                  props: {
                    type: "warning",
                  },
                  style: {},
                  on: {
                    click: () => {
                      this.requestBody(params);
                    },
                  },
                },
                "查看详情"
              ),
              // h("Button",{
              //   props: {
              //     type: "success",
              //   },

              //   on: {
              //     click: () => {
              //         this.detail(params);
              //     }
              //   }
              //   },"查看响应结果"),
            ]);
          },
        },
      ],
      data: [],
      total: 10,
      size: 10,
      current: 1,
      time: [],
      operationType:'',
      accountName: "",
      modal: false,
      msg: "",
      modal2: false,
      msg2: "",

      logModal: false,

      logDetail: {
        browserType: "", //浏览器
        clientType: "", //操作系统
        requestBody: "", //请求参数
        responseBody: "", //返回结果
        url: "", //接口名称
      },
    };
  },
  components: {
    JsonViewer,
  },
  created() {
    this.getSystemLoginLog();
  },
  methods: {
    changePage(data) {
      this.current = data;
      this.getSystemLoginLog();
    },
    changeOrder() {
      console.log(this.time);
      this.current = 1;
      this.getSystemLoginLog();
    },
    getSystemLoginLog() {
      this.loading = true;
      this.$http(
        "/chongqing/stage/log/getOperationList",
        {
          current: this.current,
          username: this.accountName,
          endTime: this.time[1] ? this.getTime2(this.time[1]) : "",
          size: this.size,
          beginTime: this.time[0] ? this.getTime2(this.time[0]) : "",
          operationType: this.operationType,
        },
        "post",
        (res) => {
          if (res.data.code == 1000) {
            this.data = res.data.data.records;
            this.total = res.data.data.total;
          } else {
            this.$Message.error(res.data.msg);
          }
          this.loading = false;
        }
      );
      // this.$http("/stage/systemMonitoring/getSystemOperationLog", {
      //   current: this.current,
      //   museumName: this.museumName,
      //   end: this.time[1]?this.getTime(this.time[1]):'',
      //   size: this.size,
      //   start: this.time[0]?this.getTime(this.time[0]):''
      // }, "post", res => {
      //   if (res.data.code == 200) {
      //     this.data = res.data.data.records
      //     this.total = res.data.data.total
      //   }else{
      //     this.$Message.error(res.data.msg);
      //   }
      //   this.loading = false
      // })
    },
    // detail(params) {
    //   this.modal = true;
    //   if (params.row.responseBody) {
    //     this.msg = JSON.parse(params.row.responseBody);
    //   } else {
    //     this.msg = {};
    //   }
    // },
    requestBody(params) {
      // this.modal2 = true;
      // if (params.row.requestBody) {
      //   this.msg2 = JSON.parse(params.row.requestBody);
      // } else {
      //   this.msg2 = {};
      // }
      let id = params.row.id;
      this.loading = true;
      this.$http(
        "/chongqing/stage/log/getOperationLogDetail",
        {
          id,
        },
        "get",
        (res) => {
          if (res.data.code == 1000) {
            console.log(res.data);
            this.logModal = true;
            
            this.logDetail.browserType = res.data.data.browserType
            this.logDetail.clientType = res.data.data.clientType
            this.logDetail.requestBody = JSON.parse(res.data.data.requestBody)
            this.logDetail.responseBody = JSON.parse(res.data.data.responseBody)
            this.logDetail.url = res.data.data.url
          } else {
            this.$Message.error(res.data.msg);
          }
          this.loading = false;
        }
      );
    },
  },
};
</script>

<style scoped>
.logView {
  width: 100%;
  height: auto;
  display: flex;
  justify-content: flex-start;
  flex-wrap: wrap;
}
.logItem {
  width: 50%;
  height: auto;
 
  display: flex;
  align-items: flex-start;
}
.mt30 {
   margin-top: 30px;
}
.logItem .title {
  width: 75px;
  line-height: 30px;
}

.logItem .conten {
  width: 320px;
  border: 1px solid #d9d9d9;
  border-radius: 4px;
  padding: 4px 11px;
  max-height: 300px;
  overflow: auto;
}
</style>